<template>
    <!-- 提货方式 -->
    <nut-popup class="shangmenindex" @click-overlay="diaClose" close-on-click-overlay :visible="props.isShow" round
        position="bottom" :style="{ height: '90%' }">
        <view class="tihuoall">
            <view class="top">提货方式</view>
            <view class="tihuocenter">
                <view class="tihuocontent">
                    <view class="flex">提货方式 <span class="strong">{{ pickUpType(alldatas.pickUpMode) }}</span>
                    </view>
                    <view v-if="alldatas.pickUpMode === '2'">
                        <view class="log">
                            <image class="img1" src="../../assets/images/配送网点@2x.png" />
                            <view class="boxcontent">
                                <h3>{{ alldatas.destinationBranchName }}</h3>
                                <p>{{ orderStore.endCompanyInfo.address }}</p>
                                <view>
                                    <span class="sp1">距离</span>
                                    <span class="sp2">{{ (alldatas.sendGoodsMiles * 0.01).toFixed(2) }}km</span>
                                    <span class="sp3">距离最近</span>
                                </view>
                            </view>
                            <view @click="openModal">
                                <image class="img2" src="../../assets/images/icon_网点电话@2x.png" />
                            </view>
                            <view @click="lookPosition">
                                <image class="img3" src="../../assets/images/icon_网点定位@2x.png" />
                            </view>
                        </view>

                        <view class="tihuoshiduan flex">
                            <view class="left">配送地址</view>
                            <view class="tihuocenters strong">
                                {{ alldatas.fromAdd }}
                            </view>
                        </view>

                        <view class="tihuoshiduan flex">
                            <span class="left">配送时段</span>
                            <span class="strong">
                                {{ alldatas.deliveryTime }}
                            </span>
                        </view>

                        <view class="tihuoshiduan flex">
                            <span class="left">送货类型</span>
                            <span class="strong" v-if="alldatas.deliveryType === '1'">送商超</span>
                            <span class="strong" v-else-if="alldatas.deliveryType === '2'">进仓</span>
                            <span class="strong" v-else-if="alldatas.deliveryType === '3'">报关</span>
                            <span class="strong" v-else>无</span>
                        </view>

                        <view class="tihuoshiduan flex">
                            <span class="left">送货费</span>
                            <span class="tihuoprice strong">{{ deliveryCost ? deliveryCost : 0 }} 元</span>
                        </view>
                    </view>
                    <view v-else-if="alldatas.pickUpMode === '3'">
                        <view class="tihuoshiduan flex">
                            <view class="left">配送地址</view>
                            <view class="tihuocenters strong">
                                {{ alldatas.fromAdd }}
                            </view>
                        </view>
                        <view class="tihuoshiduan flex">
                            <span class="left">送货费</span>
                            <span class="tihuoprice strong">{{ deliveryCost ? deliveryCost : 0 }} 元</span>
                        </view>

                        <view class="tihuoshiduan flex">
                            <span class="left">送货类型</span>
                            <span class="strong" v-if="alldatas.deliveryType === '1'">送商超</span>
                            <span class="strong" v-else-if="alldatas.deliveryType === '2'">进仓</span>
                            <span class="strong" v-else-if="alldatas.deliveryType === '3'">报关</span>
                            <span class="strong" v-else>无</span>
                        </view>
                    </view>
                    <view v-else-if="alldatas.pickUpMode === '1'">
                        <view class="log">
                            <image class="img1" src="../../assets/images/配送网点@2x.png" />
                            <view class="boxcontent">
                                <h3>{{ alldatas.destinationBranchName }}</h3>
                                <p>{{ orderStore.endCompanyInfo.address }}</p>
                                <view>
                                    <span class="sp1">距离</span>
                                    <span class="sp2">{{ (alldatas.sendGoodsMiles * 0.01).toFixed(2) }}km</span>
                                    <span class="sp3">距离最近</span>
                                </view>
                            </view>
                            <view @click="openModal">
                                <image class="img2" src="../../assets/images/icon_网点电话@2x.png" />
                            </view>
                            <view @click="lookPosition">
                                <image class="img3" src="../../assets/images/icon_网点定位@2x.png" />
                            </view>
                        </view>
                    </view>
                </view>

                <view class="tihuofuwu">
                    <view class="service flex">
                        <span>卸货服务</span>
                        <span>{{ alldatas.dischargeCargo == '1' ? '有' : '无' }}</span>
                    </view>
                    <view class="service flex" v-if="alldatas.dischargeCargo == '1'">
                        <span>选择服务</span>
                        <span v-if="alldatas.goodsType === 1">标准件</span>
                        <span v-if="alldatas.goodsType === 2">非标件</span>
                        <span v-if="alldatas.goodsType === 3">特殊件</span>
                    </view>
                    <view class="service flex" v-if="alldatas.dischargeCargo == '1'">
                        <span>卸货楼层</span>
                        <span>{{ xiehuofagnshi }}
                        </span>
                    </view>
                </view>
            </view>

            <!-- 底部固定区 -->
            <nut-button size="large" type="info" @click="emit('closeGoodsModal')">确认</nut-button>

            <CallModal v-if="visible" :visible="visible" :tel="tel" @close="closeModal"/>
        </view>
    </nut-popup>
</template>
    
<script setup lang='ts'>
import useOrderStore from '@/store/order';
import Taro from '@tarojs/taro';
import { onMounted, ref } from 'vue';
import CallModal from '@/components/CallModal/index.vue'

const props = defineProps<{
    isShow: boolean
}>()
const emit = defineEmits(['closeGoodsModal'])
const visible = ref(false)

const orderStore = useOrderStore()
const alldatas = orderStore.orderInfo
const tel = ref('')

// 送货费
const deliveryCost = ref(0)
const dischargeCargoIsShow = ref(false)
const xiehuofagnshi = ref('')

const dischargePrice = ref({
    cargoType: 0,
    isUpStairs: false,
    isElevator: false,
    floor: 0
})

onMounted(() => {
    // 送货费判断
    let deliveryCostArr = alldatas.costList.find(item => {
        return item.ssopRemark === '送货费'
    })
    if (deliveryCostArr) {
        deliveryCost.value = deliveryCostArr.actualMoney
    }


    // 卸货费初始化
    if (alldatas.dischargeCargo == '1') {
        dischargeCargoIsShow.value = true;
        dischargePrice.value.cargoType = alldatas.goodsType - 1;
        dischargePrice.value.isUpStairs = alldatas.dischargeElevator == 0;
        dischargePrice.value.isElevator = alldatas.dischargeElevator == 1;

        // 回显楼层
        // louchengvalue = alldatas.elevatorNum;

        dischargePrice.value.floor = alldatas.elevatorNum ? alldatas.elevatorNum : 0;
        // 回显
        if (dischargePrice.value.isElevator) {
            xiehuofagnshi.value = "电梯";
        } else {
            xiehuofagnshi.value = "楼梯" + ":" + (alldatas.elevatorNum ? alldatas.elevatorNum : "1") + "楼";
        }
    } else {
        alldatas.goodsType = 0;
    }

})

function pickUpType(val: string) {
    if (val == '1') {
        return '自提'
    } else if (val == '2') {
        return '送货'
    } else {
        return '直送'
    }
}

function diaClose() {
    emit('closeGoodsModal')
}
// 查看网点位置
function positionAddress(pos: number[]) {
    Taro.openLocation({
        latitude: pos[0],
        longitude: pos[1]
    })
}

function lookPosition() {
    positionAddress([+orderStore.endCompanyInfo.localX, +orderStore.endCompanyInfo.localY])
}

function openModal() {
    tel.value = orderStore.endCompanyInfo.tel
    visible.value = true
}
function closeModal(){
    visible.value = false
}
</script>
    
<style lang="scss">
* {
    box-sizing: border-box;
}

.shangmenindex {
    background-color: #f4f5f6;

    .top {
        width: 100vw;
        height: 112rpx;
        background-color: #fff;
        line-height: 112rpx;
        padding: 0 24rpx;
        color: #252525;
        font-size: 32rpx;
        font-weight: 600;
        box-sizing: border-box;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .strong {
        max-width: 420rpx;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        color: #000;
    }

    .tihuocenter {
        max-height: 860rpx;
        overflow: auto;
        background-color: #F8F9FA;
        padding: 16rpx 24rpx;
        box-sizing: border-box;

        .tihuocontent {
            box-sizing: border-box;
            background-color: #fff;
            width: 700rpx;
            padding: 36rpx 24rpx;

            .log {
                box-sizing: border-box;
                width: 654rpx;
                height: 160rpx;
                border: 1rpx solid #0966FF;
                border-radius: 10rpx;
                padding: 16rpx;
                display: flex;
                align-items: center;
                margin-top: 44rpx;

                image {
                    margin-right: 16rpx;
                }

                .img1 {
                    height: 128rpx;
                    width: 128rpx;
                }

                .img2 {
                    height: 64rpx;
                    width: 64rpx;
                }

                .img3 {
                    height: 64rpx;
                    width: 64rpx;
                }

                .boxcontent {
                    width: 296rpx;
                    margin-right: 38rpx;

                    view {
                        display: flex;
                    }

                    h3 {
                        font-size: 26rpx;
                        line-height: 40rpx;
                        color: #252525;
                    }

                    p {
                        min-height: 60rpx;
                        font-size: 18rpx;
                        line-height: 24rpx;
                        color: #999999;
                    }

                    span {
                        line-height: 28rpx;
                        font-size: 22rpx;
                    }
                }

            }

            .tihuoshiduan {
                padding: 30rpx 24rpx;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

                .left {
                    width: 128rpx;
                    color: #666666;
                    margin-right: 12rpx;
                }
            }


        }

        .tihuofuwu {
            box-sizing: border-box;
            width: 700rpx;
            background-color: #fff;
            margin-top: 16rpx;
            border-radius: 10rpx;
            padding: 36rpx 24rpx;
            color: #252525;

            .service {
                line-height: 40rpx;
                margin-bottom: 36rpx;
            }
        }
    }

    .nut-button {
        position: fixed;
        bottom: 10rpx;
        background-color: #0966FF;
        color: #fff;
        font-size: 28rpx;
    }
}
</style>